<template>
  <div>
    <el-upload class="upload-demo fl" ref="upload" action="''" :http-request="upload" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :limit="1" :file-list="fileList" accept :on-success="handleSuccess">
      <el-button size="mini" type="primary" round icon="el-icon-upload">选择文件</el-button>
    </el-upload>
    <div class="clear"></div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {
    createId
  } from '@/utils/index' // 一个生产唯一的id的方法
  import OSS from 'ali-oss'
import { selectOSSInfo } from '@/api/set/oss'
  // oss 上传
  export default {
    data() {
      return {
        uploadParams: {
          uploadPath: '',
          uploadSize: '',
          fileName: ''
        },
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrl: '',
        filePath: '',
        uploadKey: '',
        ossData:{
          region:'',// 服务器集群地区
          accessKeyId:'',// OSS帐号
          accessKeySecret:'',// OSS 密码
          bucket:'',// 阿里云上存储的 Bucket
        }
      }
    },
    created() {
      selectOSSInfo().then(res=>{
        if(res.code==1){
          // res.data=JSON.parse(this.$base64.decode(res.data));
          this.ossData.region=res.data.oss_region;
          this.ossData.accessKeyId=res.data.oss_accessKeyId;
          this.ossData.accessKeySecret=res.data.oss_accessKeySecret;
          this.ossData.bucket=res.data.oss_backetName;
        }
    
      })
    },
    methods: {
      // 图片上传前验证
      // :before-upload="beforeAvatarUpload"
      beforeAvatarUpload(file) {
        // file.size / 1024 图片的大小
        const format = file.type === 'application/vnd.ms-excel' ||
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        const isLt1M = file.size / 1024 / 1024 < 1;
        this.uploadParams.uploadSize = file.size
        if (!format) {
          this.$message.error('上传图片只能是word，excel格式!');
        }
        if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 1MB!');
        }
        return format && isLt1M;
      },
      // 上传图片到OSS 同时派发一个事件给父组件监听
      upload(item) {
        let type
        let client = new OSS({
          region: this.ossData.region,
          accessKeyId: this.ossData.accessKeyId,
          accessKeySecret: this.ossData.accessKeySecret,
          bucket: this.ossData.bucket
        })
        switch (item.file.type) {
          case 'application/vnd.ms-excel':
            {
              type = 'csv'
            }
            break;
          case 'text/csv':
            {
              type = 'csv'
            }
            break;
          case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
            {
              type = "xlsx"
            }
            break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
            {
              type = 'doc'
            }
            break;
        }
        let key = 'bulkImport/time=' + new Date().getTime() + '&id=' + this.guidGenerator() + '.' + type // 存储路径，并且给图片改成唯一名字
        this.uploadKey = key
        this.uploadParams.fileName = item.file.name
        return client.put(key, item.file).then(res => { // OSS上传
          const url = res.url
          this.uploadParams.uploadPath = client.signatureUrl(key, {
            expires: 999999999999999
          }) // 可访问的链接
        })
      },
      guidGenerator() {
        var S4 = function() {
          return ((1 + Math.random()) * 0X10000 | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
      },
      handleSuccess(res, file) {
        this.filePath = URL.createObjectURL(file.raw)
        this.fileList = []
        this.$emit('changeSrc', this.filePath, this.uploadParams.uploadPath, this.uploadParams.fileName, this.uploadKey)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file, fileList) {

      },
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .upload-demo {
    display: inline-block;
    line-height: 32px;
    margin-left: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #2c9b69;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 102px;
  }
</style>
